export const mainBtn = document.querySelector('.main-btn')
export const task = document.querySelector('.task')
export const trashBtn = document.querySelector('.trash-btn')
export const allFinish = document.querySelector('.all-finish')
export const allDel = document.querySelector('.all-del')
export const mainCon = document.querySelector('.main-container')
export const addCon = document.querySelector('.add-container')
export const trashCon = document.querySelector('.trash-container')
export const allDelFover = document.querySelector('.all-del-forever')
export const allRestore = document.querySelector('.all-restore')
export const addList  = addCon.querySelector('.add-list')
export const allLi = addList.getElementsByTagName('li')
export const navOpen = document.querySelector('.main-nav-open')
export const navClose = document.querySelector('.main-nav-close')
export const trashList = document.querySelector('.trash-list');

//通过增加类名的方式控制元素
export function ban(){
    allFinish.classList.add('disabled')
    allDel.classList.add('disabled')
}
export function allow(){
    allFinish.classList.remove('disabled')
    allDel.classList.remove('disabled')
}
export function showMainCon(){
    mainCon.classList.remove('none')
    addCon.classList.add('none')
    trashCon.classList.add('none')
}
export function showAddCon(){
        mainCon.classList.add('none')
        addCon.classList.remove('none')
        trashCon.classList.add('none')
}
export function showTrashCon(){
    mainCon.classList.add('none')
    addCon.classList.add('none')
    trashCon.classList.remove('none')
}

export function showMainBtn(){
    allFinish.classList.add('none')
    allDel.classList.add('none')
    allDelFover.classList.add('none')
    allRestore.classList.add('none')
}

export function showAddBtn(){
    allFinish.classList.remove('none')
    allDel.classList.remove('none')
    allDelFover.classList.add('none')
    allRestore.classList.add('none')
}
export function showTrashBtn(){
    if(trashList.innerHTML == ''){
        allDelFover.classList.add('disabled')
        allRestore.classList.add('disabled')
    }else{
        allDelFover.classList.remove('disabled')
        allRestore.classList.remove('disabled')
    }
    allDelFover.classList.remove('none')
    allRestore.classList.remove('none')
    allFinish.classList.add('none')
    allDel.classList.add('none') 
}



//判断页面状态
export function display() {
    if (allLi.length === 0 || trashList.length === 0) {
        // 如果没有 <li>，显示主页面，隐藏列表页面
        showMainCon()
        showMainBtn()
        ban()
        navClose.style.display = 'block'
        navOpen.style.display = 'none'
    } else {
        // 如果有 <li>，显示列表页面，隐藏主页面
        showAddCon()
        showAddBtn()
        allow()
        navClose.style.display = 'none'
        navOpen.style.display = 'block'
    }
}
